import defaltImg from '@/assets/images/200.png'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
const directivePlugin = {
  install (app) {
    // console.log(app)
    // 实现全局指令的注册即可
    // mainjs注册该插件 -> install -> 传入app -> app.directive -> 全局指令就注册好了！！！
    app.directive('lazy-img', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        // 懒加载核心逻辑实现

        // el:img dom对象
        // binding.value  图片url地址
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaltImg
              }
              el.src = binding.value
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0 }
        )
      }
    })
  }
}
export default directivePlugin
